import React from 'react'
import _ from 'lodash'
import { Progress, Divider, Popover, Table } from 'antd'
import { TwsReactMarkdownPreview } from 'tws-antd'
import { convertContent } from '../../../../../constant/lang-util'
import { FormattedMessage } from 'react-intl'

export default class AssignmentsBasicQuizzesStatusBox extends React.Component {
  getAnswer = quiz =>{
    return quiz.type === 'BASIC_BLANK_QUIZ'
      ? <span><b>{convertContent('答案')}：</b>{quiz.answer}</span>
      : <div>
        <b>{convertContent('选项')}：</b>
        {(quiz.choice||'').split('|').map((item,index)=> <p>{index+'. '+item}</p>)}
        <p><b>{convertContent('答案')}：</b> {quiz.answer}</p>
      </div>
  }
  getQuizPreview = quiz => {
    return <div>
      <TwsReactMarkdownPreview source={quiz.description}/>
      <Divider/>
      {
        this.getAnswer(quiz)
      }
    </div>
  }
  getColumns = () => {
    return [{
      title: <FormattedMessage id='题目'/>,
      dataIndex: 'description',
      render: (text, record) => {
        return <Popover content={this.getQuizPreview(record)} placement='right'>
          <a href='javascript:(0)'>{(text || '').substring(0, 80)}</a>
        </Popover>
      }
    }, {
      title: <FormattedMessage id='总人数'/>,
      dataIndex: 'total'
    }, {
      title: <FormattedMessage id='正确人数'/>,
      dataIndex: 'correctCount',
      sorter: (a, b) => a.correctCount - b.correctCount
    }, {
      title: <FormattedMessage id='错误人数'/>,
      dataIndex: 'wrongCount'
    }, {
      title: <FormattedMessage id='未做人数'/>,
      dataIndex: 'unFinished'
    },{
      title: <FormattedMessage id='正确人数比率'/>,
      width: 200,
      render: (text, record) => {
        const {correctCount, wrongCount} = record
        const percent = ((correctCount / (correctCount + wrongCount)).toFixed(2)) * 100
        return <Progress
          percent={parseInt(percent)}
        />
      }
    }]
  }
  statistic = (current, description) => {
    const total = current.filter(item => !!item.studentId).length
    const correctCount = current.filter(item => parseInt(item.isCorrect) === 1).length
    const wrongCount = current.filter(item => parseInt(item.isCorrect) === 0).length
    const unFinished = total - correctCount - wrongCount

    return {total, unFinished, correctCount, wrongCount, answer: current[0].answer, description,
    choice:current[0].choice}
  }
  getData = assignmentsQuizzesStatus => {
    const result = []
    const data = _.groupBy(assignmentsQuizzesStatus, item => item.description)

    Object.keys(data).forEach(key => {
      const currentQuiz = data[key]
      result.push(this.statistic(currentQuiz, key))
    })
    result.sort((a,b)=>b.correctCount - a.correctCount)
    return result
  }

  render () {
    const {assignmentsBasicQuizzesStatus} = this.props
    const columns = this.getColumns(assignmentsBasicQuizzesStatus)
    const data = this.getData(assignmentsBasicQuizzesStatus)

    return <Table columns={columns}
                  dataSource={data}
                  pagination={false}
                  bordered
                  size='small'
    />
  }
}